<template>
	<view v-if="scrollData >= 800" @click.stop="toTopMethod" block class="FiexdBut">
		<image class="btn" mode="widthFix" :src="rootImagePath + 'submit-btn.png'"></image>
	</view>

</template>

<script>
	import {
		ref
	} from "vue";

	import VueScrollTo from "vue-scrollto"
	export default {
		name: "GotoFormFixBtn",
		props: ['targetId','rootImagePath'],
		mounted() {
			// 监听滚动条位置
			window.addEventListener("scroll", this.scrollTopMethod, true);
		},
		setup(props) {
			// 滚动条数据
			const scrollData = ref(0);

			const scrollTopMethod = () => {
				scrollData.value = document.documentElement.scrollTop || document.body.scrollTop;
			}

			const toTopMethod = () => {
				console.log('toTopMethod', props.targetId)
				let offset = document.documentElement.clientHeight / 2 - 100;
				VueScrollTo.scrollTo(document.getElementById(props.targetId), 1000, {
					offset: -offset,
				});
			}

			return {
				scrollData,
				scrollTopMethod,
				toTopMethod,
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.FiexdBut {
		width: 100%;
		height: 6rem;
		padding: 0px;
		border-width: 0px;
		position: fixed;
		z-index: 3;
		bottom: 0;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			width: 64vw;
			animation: butChange 1s infinite;

		}

	}
</style>